import React from 'react';
import { View, Image } from '@tarojs/components';
import { gotoPage, Guid } from '@/utils/common';
import './index.scss';

type IData = {
  id?: string;
  url?: string;
  title: string;
  remark?: string;
  route?: string;
};

interface IZbCardProps {
  /**
   * 内容
   */
  data: IData[];
  /**
   * 一行显示多少个
   */
  columnNum?: number;
  /**
   * 类型
   */
  type?: 'normal';
  /**
   * class样式
   */
  className?: string;
  /**
   * 回调事件
   */
  onChange?: (data: any) => void;
}
const ZbCard = (props: IZbCardProps) => {
  const { data, type = 'normal', columnNum = 2, className = '', onChange } = props;

  const cols = React.useMemo<string>(() => {
    switch (columnNum) {
      case 1:
        return 'grid-cols-1';
      case 2:
        return 'grid-cols-2';
      case 3:
        return 'grid-cols-3';
      case 4:
        return 'grid-cols-4';
      case 5:
        return 'grid-cols-5';
      case 6:
        return 'grid-cols-6';
      case 7:
        return 'grid-cols-7';
      case 8:
        return 'grid-cols-8';
      case 9:
        return 'grid-cols-9';
    }
    return '';
  }, [columnNum]);

  const onRoute = (it: any) => {
    if (it.route) {
      gotoPage(it.route);
    } else {
      onChange && onChange(it);
    }
  };

  return (
    <View>
      <View className={`zb-card grid ${cols} gap-2 p-2`}>
        {type === 'normal' &&
          data.map((it: IData) => (
            <View
              key={it.id || Guid()}
              className={`flex items-center bg-white shadow-lg rounded-md p-2 ${className}`}
              onClick={() => {
                onRoute(it);
              }}
            >
              {it.url && (
                <View>
                  <Image className="zb-card-image" mode="widthFix" src={it.url} />
                </View>
              )}

              <View className="pl-10px">
                <View className={`text-${columnNum === 2 ? 'sm' : 'lg'} font-bold pb-10px`}>{it.title || ''}</View>
                <View className={`text-${columnNum === 2 ? 'sm' : 'sm'} text-gray-500`}>{it.remark || ''}</View>
              </View>
            </View>
          ))}
      </View>
    </View>
  );
};

export default ZbCard;
